<template>
  <div class="container no-drag">
    <div class="top">
      <avatar style="margin-right: 10px" :src="userInfo.avatar" width="35px" height="35px"></avatar>
      <div style="display: flex;flex-direction: column;">
        <span>{{userInfo.nickname}}</span>
        <span style="color: rgb(156, 156, 156)">{{tips}}</span>
      </div>
    </div>
    <div class="operator-container">
      <ul class="operator">
        <li @click="close" style="margin-right: 15px">
          <div class="icon-container">
            <el-icon class="icon" style="transform: rotateZ(135deg)"><PhoneFilled /></el-icon>
          </div>
        </li>
        <li>
          <div class="icon-container" style="background-color: rgb(7, 193, 96)">
            <el-icon class="icon"><PhoneFilled /></el-icon>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useMenuStore } from '../../../stores/menu'
import { onBeforeMount , ref } from 'vue'
import { searchUser } from '../../../api/user'
import avatar from  '@/components/img/index.vue'
import { useRoute } from 'vue-router'
import { PhoneFilled } from '@element-plus/icons-vue'


const route = useRoute()
const menuStore = useMenuStore()
menuStore.menuShow = false

const tips = ref('邀请你语音通话...')
const {uId , sessionId , type} = route.params

console.log('收到uId:' , uId)

const userInfo = ref({})
onBeforeMount(() => {
  getUser()
})


// 获取用户详情
const getUser = async () => {
  const res = await searchUser(uId);
  userInfo.value = res.data
  console.log(res.data)
}

// 挂断
const close = () => {
  window.ipcRenderer.send('operateWindow' , 'close')
}

</script>


<style scoped lang="less">
.container {
  background-color: rgba(53, 52, 53, 0.9);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  //border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;

  }

  .operator-container {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    .operator {
      height: 100%;
      padding: 0px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      li {
        cursor: pointer;

        .icon-container {
          display: flex;
          background-color: red;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          justify-content: center;
          align-items: center;

          .icon {
            font-size: 20px;
          }
        }
      }


    }
  }
}
</style>
